<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>设备设置</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
</head>
<body>
  <div class="container mt-5">
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header">
            <h2>串口设置</h2>
          </div>
          <div class="card-body">
            <form action="#">
              <div class="form-group">
                <label for="port">串口号：</label>
                <select id="port" name="port" class="form-control">
                  <option value="/dev/ttyS0">/dev/ttyS0</option>
                  <!-- 其他串口号选项可以在这里添加 -->
                </select>
              </div>
              <div class="form-group">
                <label for="baudrate">波特率：</label>
                <select id="baudrate" name="baudrate" class="form-control">
                  <option value="9600">9600</option>
                  <option value="19200">19200</option>
                  <option value="38400">38400</option>
                  <option value="57600">57600</option>
                  <option value="115200">115200</option>
                </select>
              </div>
              <div class="form-group">
                <label for="data_bits">数据位：</label>
                <select id="data_bits" name="data_bits" class="form-control">
                  <option value="8">8位</option>
                  <option value="7">7位</option>
                </select>
              </div>
              <div class="form-group">
                <label for="parity">校验位：</label>
                <select id="parity" name="parity" class="form-control">
                  <option value="None">无</option>
                  <option value="Even">偶校验</option>
                  <option value="Odd">奇校验</option>
                </select>
              </div>
              <div class="form-group">
                <label for="stop_bits">停止位：</label>
                <select id="stop_bits" name="stop_bits" class="form-control">
                  <option value="1">1位</option>
                  <option value="2">2位</option>
                </select>
              </div>
              <div class="form-group">
                <label for="flow_control">流控位：</label>
                <select id="flow_control" name="flow_control" class="form-control">
                  <option value="None">无</option>
                  <option value="RTS/CTS">RTS/CTS</option>
                  <option value="XON/XOFF">XON/XOFF</option>
                </select>
              </div>
              <div class="form-group">
                <button type="button" class="btn btn-primary" onclick="get_Serial_port_info()">保存设置</button>
                <button type="button" class="btn btn-secondary">刷新配置</button>
                <button type="button" class="btn btn-info" onclick="displayDate()">显示日期</button>
              </div>
              <div class="form-group">
                <p id="time" class="mt-3"></p>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <!-- Custom JS -->
  <script>
    function get_Serial_port_info() {
      // 获取表单数据
      const port = document.getElementById('port').value;
      const baudrate = document.getElementById('baudrate').value;
      const data_bits = document.getElementById('data_bits').value;
      const parity = document.getElementById('parity').value;
      const stop_bits = document.getElementById('stop_bits').value;
      const flow_control = document.getElementById('flow_control').value;

      // 这里可以添加代码将获取到的数据发送到服务器或者进行其他操作
      console.log('串口号:', port);
      console.log('波特率:', baudrate);
      console.log('数据位:', data_bits);
      console.log('校验位:', parity);
      console.log('停止位:', stop_bits);
      console.log('流控位:', flow_control);

      // 示例：显示一个确认保存的消息（实际应用中可能需要更复杂的处理）
      alert('串口设置已保存！');
    }

    function displayDate() {
      // 显示当前日期和时间
      const now = new Date();
      const dateString = now.toLocaleDateString() + ' ' + now.toLocaleTimeString();
      document.getElementById('time').textContent = dateString;
    }
  </script>
</body>
</html>
